<template>
  <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getCarList({page})"> -->
  <div class="container-item-list-cart">
    <div v-for="(temp,index) in carDataList" :key="index" class="group-product-list">
      <van-checkbox v-model="temp.checked" checked-color="#D63A54" @change="checkBoxClickHandler" />
      <van-image class="item-cover" :src="temp.thumb" width="80" height="80" radius="5" fit="cover" @click="routerLink(`productDetails`,temp.goods_id)" />
      <div class="group-product-info">
        <div class="item-name">{{ temp.product_name }}</div>
        <div class="item-type">已选： {{ temp.specification_name }}</div>
        <van-stepper v-model="temp.num" :disable-input="false" size="mini" :max="temp.inventory || temp.num" @change="changeHandler({id:temp.options_id, num:temp.num})" />
      </div>
      <div class="item-price-total">￥{{ temp.specification_price * temp.num | saveNum }}</div>
      <img class="item-btn-del" src="@/assets/delete.png" @click="deleteHandler({id:temp.options_id, index})">
    </div>
  </div>
  <!-- </van-list> -->
</template>

<script>
// api
import { shopCartList, shopCart } from '@/api/miva'
// vant
import { Toast } from 'vant'
export default {
  // filters: {
  //   saveNum(num) {
  //     const res = parseInt(num * 100) / 100
  //     return res
  //   }
  // },
  data() {
    return {
      loading: false,
      finished: false,
      checked: true,
      carDataList: [],
      page: 2
    }
  },
  async mounted() {
    await this.getCarList()
  },
  methods: {
    routerLink(name, id) {
      console.log('购物车列表点击-log:', name, id)
      this.$router.push({ name, params: { id }})
    },
    async changeHandler({ id, num }) {
      await shopCart({ id, num })
    },
    checkBoxClickHandler() {
      this.$store.dispatch('miva/changeCart', this.carDataList)
      this.$emit('change')
    },
    async deleteHandler({ id, index }) {
      await shopCart({ id })
      this.carDataList.splice(index, 1)
      Toast('已删除')
    },
    async getCarList({ page } = {}) {
      const res = await shopCartList({ page })
      const data = res.data || []
      for (const key in data) {
        if (!data[key]['checked']) {
          data[key]['checked'] = false
        }
      }
      if (page) {
        this.carDataList = this.carDataList.concat(data)
        this.page++
      } else {
        this.carDataList = data
      }
      this.$store.dispatch('miva/changeCart', this.carDataList)
    }
  }
}
</script>

<style lang="less">
.container-item-list-cart {
  background: #f5f6f8;
  .group {
    &-product-list {
      margin-bottom: 10px;
      padding: 10px;
      display: flex;
      align-items: center;
      position: relative;
      background: #fff;
    }
    &-product-info {
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
  .item {
    &-cover {
      margin: 0 10px;
    }
    &-type {
      font-size: 14px;
      color: #999;
    }
    &-price-total {
      position: absolute;
      top: 10px;
      right: 10px;
      color: #d63a54;
    }
    &-btn-del {
      width: 15px;
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
  }
}
</style>
